<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiperA">
      <!-- 幻灯内容 -->
      <swiperSlide>
        <img src="http://p4.music.126.net/T-G_dcdY3P0a41l54jI-9Q==/18607035278588986.jpg" alt="" />
      </swiperSlide>
      <swiper-slide>
        <img src="http://p3.music.126.net/NtBC2n9RZ7QGATCa6m5aRw==/19180980346562607.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="http://p4.music.126.net/XYvSPA2TYNDZkEwvWc9UBA==/18820340534488235.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="http://p3.music.126.net/QMe35YOtRWmydMUmCB8YSQ==/18670806953686715.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="http://p3.music.126.net/_uIWciduAtR6DXdle4oWaA==/18621328929845758.jpg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img src="http://p3.music.126.net/_n8boghF7FolRC7R-ezpQA==/19099616486108379.jpg" alt="" />
      </swiper-slide>
      <!-- ... -->
      <!-- 以下控件元素均为可选（使用具名slot来确定并应用一些操作控件元素） -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
      <!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>
    <div class='middle-nav'>
      <div class="middle-nav-item">
        <i class="iconfont icon-shouyinji01"></i>
        <div class="title">私人FM</div>
      </div>
      <div class="middle-nav-item">
        <i class="iconfont icon-rili"></i>
        <span>每日歌曲推荐</span>
      </div>
      <div class="middle-nav-item">
        <i class="iconfont icon-paixingbang"></i>
        <span>云音乐排行榜</span>
      </div>
    </div>
    <publictitle name="推荐歌单">
    </publictitle>
    <div class="music-list">
      <div class="music-item" v-for="item in musiclist" @click='openMusicList(item)'>
        <a class="album">
          <img :src="item.picUrl" alt="">
        </a>
        <playCount :count='item.playCount'></playCount>
        <div class="album-name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import publictitle from '../../utils/title/title'
import playCount from '../../utils/playCount/playCount'
export default {
  components: {
    swiper,
    swiperSlide,
    publictitle,
    playCount
  },
  data() {
    return {
      swiperOption: {
        autoplay: 3000,
        loop: true,
        //          autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination'
      },
      musiclist: []
    }
  },
  // example code (if you need to get the current swiper object, you can find the swiper object like this, the $ref object is a ref attribute corresponding to the dom redefined)
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象，同时配置中的notNextTick属性一定要设置为true
  computed: {
    swiper() {
      return this.$refs.mySwiperA.swiper
    }
  },
  created() {
    this.getMusic();
  },
  mounted() {
    // you can use current swiper object to do something(swiper methods)
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    //      console.log('this is current swiper object', this.swiper)
    //      this.swiper.slideTo(3, 1000, false)
  },
  methods: {
    getMusic: function () {
      this.$http.get('http://localhost:3000/personalized')
        .then(response => {
          this.musiclist = response.body.result;
        })
    },
    play: function (item) {
      this.$store.commit('addsong', item);
      this.$store.commit('pause');
    },
    openMusicList(item) {
      this.$store.commit('openMusicList', item);
      this.$store.commit('isMusicList', true);
    }
  },
  watch: {

  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import "../../../../static/base/public";
@import url("../../../../static/css/iconfont.css");

.swiper-slide img {
  width: 100%;
}

.swiper-pagination-bullet-active {
  background: #e81816 !important;
}

.middle-nav {
  display: flex;
  height: 2.7rem;
  align-items: center;
  .middle-nav-item {
    flex: 1;
    text-align: center;
    .iconfont {
      display: block;
      margin: 0 auto .2rem auto;
      font-size: .7rem !important;
      padding: 0.2rem;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      border-radius: 50%;
      border: 1px solid #e81816;
      color: #e81816;
    }
  }
}

.music-list {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-between;
  .music-item {
    box-sizing: border-box;
    width: 32%;
    position: relative;
    .album {
      display: block;
      width: 100%;
      height: rem(234);
      text-align: center;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }
    .album-name {
      box-sizing: border-box;
      margin: 5px 0;
      padding: 0 10px;
      line-height: 1.4;
      height: 2.8em;
      max-height: 2.8em;
      overflow: hidden;
    }
  }
}

[data-dpr='1'] .album-name {
  font-size: 14px;
}

[data-dpr='2'] .album-name {
  font-size: 28px;
}

[data-dpr='3'] .album-name {
  font-size: 42px;
}
</style>
